<template>
  <div class="white-mold">
    <div class="grid-wrap">
      <div
        class="grid-item"
        :class="{
          active: sceneStore.activeWhiteMolds.includes(list.name) && !list.upload,
        }"
        v-for="(list, index) in dataList"
        :key="list.name"
        @click="selectMold(list)"
      >
        <div class="icon-wrap">
          <SvgIcon v-if="list.upload" icon-class="ic_plus" />
          <img v-else class="icon" :src="list.extra.imgUrl" alt="" />
          <el-popover
            :ref="setPopoverRef"
            placement="bottom"
            :width="100"
            popper-class="more-popover"
            :show-arrow="false"
            trigger="hover"
          >
            <template #reference>
              <div v-if="!list.upload" class="more-wrap" @click.stop>
                <SvgIcon icon-class="more" />
              </div>
            </template>
            <ul class="operation-ul">
              <li class="operation-li edit" @click="editeMold(list)">编辑</li>
              <el-popconfirm
                title="是否删除?"
                popper-class="dark-confirm"
                width="186px"
                placement="bottom"
                :icon="WarnIcon"
                @confirm="deleteWhiteMold(list)"
              >
                <template #reference>
                  <li class="operation-li delete">删除</li>
                </template>
              </el-popconfirm>
            </ul>
          </el-popover>
        </div>
        <div class="title points" :title="list.name">{{ list.name }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import WarnIcon from '@/components/icon/warn/index.vue';
import { whiteMoldList } from '@/enum/white-mold';
import { useSceneStore } from '@/store/scene';
import { deleteTreeNode, flattenTreeIterative } from '@/utils';
import { cloneDeep } from 'lodash';
import { destroyLayer } from '@/service';

defineOptions({
  name: 'WhiteMold',
});

const popoverRefs = [] as any;
const selectedMold = ref<any>({});
const dataList = computed<any>(() => {
  return whiteMoldList;
});

const sceneStore = useSceneStore();

const selectMold = (list: any) => {
  if (sceneStore.activeWhiteMolds.includes(list.name)) {
    const index = sceneStore.activeWhiteMolds.findIndex((item: string) => item === list.name);
    const layerIndex = sceneStore.layerList.findIndex(
      (item: API.Scene.ILayer) => item.type === 'tileset' && item.json.name === list.name
    );
    sceneStore.selLayer = null;
    // 刪除图层文件夹中的资源
    const layerTree = cloneDeep(sceneStore.layerTree);
    const layerList = flattenTreeIterative(layerTree);
    const layers: any = layerList.filter(
      (v: any) => v.code === sceneStore.layerList[layerIndex].code
    );
    deleteTreeNode(sceneStore.layerTree, layers[0].fe_id, {
      id: 'fe_id',
    });
    sceneStore.activeWhiteMolds.splice(index, 1);
    destroyLayer(sceneStore.layerList[layerIndex]);
    sceneStore.layerList.splice(layerIndex, 1);
  } else {
    const layer = {
      code: Math.random().toString().split('.')[1],
      show: true,
      json: list,
      name: list.name,
      layerName: list.name,
      desc: '',
      type: 'tileset',
      attr: {
        material: {},
      },
    };
    sceneStore.activeWhiteMolds.push(list.name);
    sceneStore.layerList.unshift(layer);
    sceneStore.specialEffectVisible = true;
    sceneStore.selLayer = layer;
  }
};

const editeMold = (list: any) => {};

const deleteWhiteMold = (list: any) => {
  // ToDo
};

function setPopoverRef(el: any) {
  if (el) {
    popoverRefs.push(el);
  }
}

// 关闭popover
function closePopover() {
  popoverRefs.forEach((v: any) => v.hide());
}
</script>

<style lang="less" scoped>
.white-mold {
  height: 100%;
  padding-top: 8px;

  .grid-wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 20px;
    row-gap: 20px;

    .grid-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;

      .icon-wrap {
        position: relative;
        width: 100px;
        height: 84px;
        background: #202329;
        border-radius: 4px;
        border: 1px solid transparent;
        overflow: hidden;

        .svg-icon {
          font-size: 42px;
          margin-right: 0px;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }

        .more-wrap {
          position: absolute;
          right: 0;
          bottom: 0;
          width: 30px;
          height: 20px;
          background: fade(#0560fd, 80%);
          border-top-left-radius: 10px;

          .svg-icon {
            font-size: 16px;
          }
        }
      }

      .icon {
        width: 100%;
        height: 100%;
      }

      .title {
        width: 100px;
        margin-top: 10px;
        text-align: center;
      }

      &.active {
        .icon-wrap {
          border-color: blue;
        }
      }
    }
  }
}
</style>
